<template>
	<view>
		<tt-bar :title="isEdit?'评价学员详情':'评价学员'" leftIcon="icon-back">
			<template v-slot:rightCnt>
			 <text v-if="isEdit" class="iconfont icon-share shareBtn" @tap="share"></text>
			
			</template>
		</tt-bar>
		<view class="cntBox">
			<view class="studentInfo">
				<text class="name">{{ stname }}</text>
				<view class="row">
					<text class="iconfont icon-geren"></text>
					<text class="text">{{ cname }}</text>
				</view>
				<view class="row" v-if="csDate">
					<text class="iconfont icon-shijian1"></text>
					<text class="text">{{ csDate }} {{ (csTime&&edTime)?(csTime+'-'+edTime):'' }}</text>
				</view>
			</view>
			<view class="inputBox">
				<textarea placeholder="说点什么吧..." v-model="cnt" maxlength="100"></textarea>
				<view class="uploadImg">
					<view class="imgBox" v-for="(item, index) in selectImgList" :key="index" v-if="isShow && selectImgList.length > 0">
						<text class="iconfont icon-guanbi2fill" @tap.stop="delImg(index)"></text>
						<image :src="item" @tap="replaceImg(index)"></image>
					</view>
					<view class="upBtn" @tap="selectImg" v-if="selectImgList.length < 9">
						<text class="iconfont icon-xiangji"></text>
						<text class="btnText">上传图片</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btmBox">
			<button v-if="!isEdit" class="confirm" @tap="postData">确认</button>
			<button v-if="isEdit" class="del" @tap="delElt">删除</button>
			<button v-if="isEdit" class="edit" @tap="editDate">修改</button>
		</view>
		<shareAction ref="shareAction"></shareAction>
	</view>
</template>

<script>
import ttBar from '@/components/ttBar/ttBar.vue';
import emptyBox from '../../components/emptyBox/emptyBox.vue';
import API from '@/common/api.js';
import { mapState } from 'vuex';
import hkModal from '../../components/hk-modal/hk-modal.vue';
import shareAction from "../../components/shareAction/shareAction.vue";
export default {
	components: {
		ttBar,
		hkModal,
		shareAction
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			selectShop: state => state.shop.selectShop
		})
	},
	data() {
		return {
			csDate: '',
			csTime: '',
			edTime: '',
			stname: '',
			id: 0,
			isEdit: 0,
			selectImgList: [],
			uploadImg: [],
			isShow: false,
			cnt: '',
			btid:''
		};
	},
	methods: {
		// 选择图片
		selectImg() {
			let _this = this;
			let _count = 9 - _this.selectImgList.length;
			uni.chooseImage({
				count: _count,
				sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					console.log(res);
					let _allCount = _this.selectImgList.length + res.tempFilePaths.length;
					if (_allCount > 9) {
						uni.showToast({
							title: '最多只能上传9张照片',
							icon: 'none'
						});
					} else {
						let _overSize = res.tempFiles.every(x => {
							return x.size <= 3145728;
						});
						if (_overSize) {
							uni.showLoading({
								mask: true,
								title: '图片上传中...'
							});
							if (_this.selectImgList.length > 0) {
								_this.selectImgList = _this.selectImgList.concat(res.tempFilePaths);
							} else {
								_this.selectImgList = res.tempFilePaths;
							}
							_this.isShow = true;
							let upArr = [];
							_this.selectImgList.forEach(function(x) {
								upArr.push({ uri: x, name: 'file' });
							});
							API.uploadImg(upArr)
								.then(upRes => {
									uni.hideLoading();
									_this.uploadImg = upRes;
									console.log(upRes);
								})
								.catch(err => {
									uni.showToast({
										title: '图片上传失败',
										icon: 'none'
									});
								});
						} else {
							uni.showToast({
								title: '图片不能超过3M',
								icon: 'none'
							});
						}
					}
				}
			});
		},
		// 替换图片
		replaceImg(e) {
			let _this = this;
			let _index = parseInt(e);
			uni.chooseImage({
				count: 1,
				sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					let _overSize = res.tempFiles.every(x => {
						return x.size <= 3145728;
					});
					if (_overSize) {
						uni.showLoading({
							mask: true,
							title: '图片上传中...'
						});
						_this.selectImgList[_index] = res.tempFilePaths[0];

						let upArr = [
							{
								uri: _this.selectImgList[_index],
								name: 'file'
							}
						];
						let upedImg=API.uploadImg(upArr)
							.then(upRes => {
								uni.hideLoading();
								_this.uploadImg[_index] = upRes[0];
								console.log(upRes);
								_this.isShow = false;
								_this.isShow = true;
							})
							.catch(err => {
								uni.showToast({
									title: '图片上传失败',
									icon: 'none'
								});
							});
					} else {
						uni.showToast({
							title: '图片不能超过3M',
							icon: 'none'
						});
					}
				}
			});
		},
		// 删除图片
		delImg(e) {
			let _index = parseInt(e);
			this.selectImgList.splice(_index, 1);
			this.uploadImg.splice(_index, 1);
		},
		postData() {
			let _this = this;
			_this.cnt = this.cnt.tailCut();
			if (!_this.cnt && _this.selectImgList.length < 1) {
				uni.showToast({
					title: '内容或图片至少选择一项',
					icon: 'none'
				});
			} else {
				let _postData = {
					id: this.id,
					memo: this.cnt
				};
				if (_this.selectImgList.length) {
					let _arr = [];
					this.uploadImg.forEach(x => {
						_arr.push({
							type: 1,
							url: x
						});
					});
					_postData.resList = _arr;
				}
				API.apiAddEvaluate(_postData).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '评价成功',
							icon: 'none'
						});
						uni.$emit('upList');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						uni.showToast({
							title: '评价失败',
							icon: 'none'
						});
					}
				});
			}
		},
		getData() {
			if (uni.getStorageSync('eltData')) {
				let _eltData = uni.getStorageSync('eltData');
				this.cnt = _eltData.memo ? _eltData.memo : '';
				if (_eltData.resList.length) {
					_eltData.resList.forEach((x, i) => {
						this.selectImgList[i] = x.url;
						this.uploadImg[i] = x.url;
					});

					this.isShow = false;
					this.isShow = true;
				}
			}
		},
		delElt() {
			API.apiDelEvaluate({
				id: this.id
			}).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: '删除评价成功',
						icon: 'none'
					});
					uni.$emit('upList');
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				} else {
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			});
		},
		editDate(){
			let _this = this;
			_this.cnt = this.cnt.tailCut();
			if (!_this.cnt && _this.selectImgList.length < 1) {
				uni.showToast({
					title: '内容或图片至少选择一项',
					icon: 'none'
				});
			} else {
				let _postData = {
					batch_id:this.btid,
					id: this.id,
					memo: this.cnt
				};
				if (_this.selectImgList.length) {
					let _arr = [];
					this.uploadImg.forEach(x => {
						_arr.push({
							type: 1,
							url: x
						});
					});
					_postData.resList = _arr;
				}
				API.apiAddEvaluate(_postData).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '评价成功',
							icon: 'none'
						});
						uni.$emit('upList');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						uni.showToast({
							title: '评价失败',
							icon: 'none'
						});
					}
				});
			}
		},
		share(){
			uni.$emit("setShareData",{
				title:this.stname+'的新变化',
				cntText:'快来看看吧',
				img:this.selectImgList[0],
				// href:'http://st.de123.com:81/#/pages/logDetail/logDetail?id='+this.id+','+this.stname		,//测试地址
				href:'http://s.de123.com/#/pages/logDetail/logDetail?id='+this.id+','+this.stname		//生产地址
			})
			this.$refs.shareAction.localOpen();
		}
	},
	onLoad(cfm) {
		this.id = cfm.id;
		this.cname = cfm.cname;
		this.stname = cfm.stname;
		this.csDate = cfm.csdate;
		this.csTime = cfm.cstime;
		this.edTime = cfm.edtime;
		this.isEdit = parseInt(cfm.isedit);
		if (this.isEdit) {
			this.btid=cfm.btid
			this.getData();
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onUnload() {
		uni.removeStorageSync("eltData");
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.btmBox {
	height: 130upx;
	width: 100%;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	padding: 0 40upx;
	justify-content: space-between;
	button {
		height: 90upx;
		margin: 0;
		border: none;
		width: 100%;
		line-height: 86upx;
		border-radius: 45upx;
		border: 2upx solid rgba(0, 0, 0, 0);
	}
	button:after {
		border: none;
		outline: none;
	}
	.confirm {
		background-color: #ffb423;
		color: #ffffff;
		font-size: 32upx;
	}
	.del {
		width: 45%;
		color: #bebebe;
		border: 2upx solid #bebebe;
		background-color: rgba(0, 0, 0, 0);
	}
	.edit {
		width: 45%;
		border: 2upx solid #ffb423;
		color: #ffb423;
		background-color: rgba(0, 0, 0, 0);
	}
}
.cntBox {
	display: flex;
	flex-direction: column;
	padding: 20upx;
	.studentInfo {
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		padding: 26upx 32upx;
		margin-bottom: 20upx;
		.name {
			font-size: 36upx;
			color: #202932;
			margin-bottom: 10upx;
		}
		.row {
			display: flex;
			align-items: center;
			margin-bottom: 6upx;
			.iconfont {
				color: #ffb423;
				font-size: 40upx;
				margin-right: 10upx;
			}
			.text {
				font-size: 28upx;
				color: #818181;
			}
		}
	}
	.inputBox {
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		padding: 26upx 32upx;
		textarea {
			width: 100%;
		}
	}
}
.uploadImg {
	display: flex;
	flex-wrap: wrap;
	.imgBox {
		width: 180upx;
		height: 180upx;
		position: relative;
		margin-right: 20upx;
		margin-bottom: 20upx;

		image {
			width: 180upx;
			height: 180upx;
			border-radius: 10upx;
		}

		.iconfont {
			position: absolute;
			top: -16upx;
			right: -16upx;
			font-size: 40upx;
			color: #ff3d3d;
			z-index: 3;
		}
	}

	.upBtn {
		width: 180upx;
		height: 180upx;
		box-sizing: border-box;
		border-radius: 10upx;
		border: 1rpx dashed #cccccc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #b2b2b2;
		margin-bottom: 20upx;

		.iconfont {
			font-size: 60upx;
		}

		.btnText {
			font-size: 28upx;
		}
	}
}
.shareBtn{
	font-size: 40upx;
}
</style>
